<template>
  <div class="cart">
    <div v-if="bol">
      <!-- 头部导航栏 -->
      <top-nav title="购物车" tnName="清空购物车"></top-nav>
      <!-- 商品展示区 -->
      <van-checkbox-group class="card-goods" v-model="checkedGoods">
        <!-- 滑动单元格 -->
        <van-swipe-cell v-for="item in goods">
          <!-- 单选标记 -->
          <van-checkbox class="card-goods__item" @click="checked(item.productId)"  :key="item.id" :name="item.id"></van-checkbox>
            <!-- 商品卡片 -->
            <van-card class="cart-vc" :title="item.title" :desc="item.desc" :price="formatPrice(item.price)" :thumb="item.thumb">
              <!-- 步进器 -->
               <template #num>
                  <van-stepper v-model="item.num" integer @change="updateNum(item.productId,item.num)"/>
                </template>
            </van-card>
          <!-- 删除按钮 -->
          <template #right>
            <van-button square text="删除" type="danger" class="delete-button" @click="deleteOne(item.productId)"/>
          </template>
        </van-swipe-cell>
      </van-checkbox-group>
      <!-- 分页栏 -->
      <van-cell>
         <van-pagination v-model="currentPage" :total-items="totalItems" :items-per-page="5" @change="getNextPage"/>
      </van-cell>
      <!-- 底部功能区 -->
      <van-submit-bar
      :price="getTotalPrice"
      :disabled="!checkedGoods.length"
      :button-text="submitBarText"
      @submit="onSubmit" />
    </div>

    <!-- 购物车为空，显示空状态 -->
    <div v-else>
      <!-- 头部导航栏 -->
      <top-nav title="购物车" tnName=""></top-nav>
      <van-empty description="购物车空空如也~">
        <van-button round type="danger" class="bottom-button" to="/">
          快去选购吧！
        </van-button>
      </van-empty>
    </div>
    <div class="zwh">

    </div>
  </div>
</template>

<script>
  import TopNav from '@/components/TopNav.vue';
  export default {
    components: {
      TopNav,
    },
    data() {
      return {
        bol:false,
        totalItems: '',
        currentPage: 1,
        checkedGoods: [],
        goods: [],
        goodsCopy:[],
        totalPrice:0,
        num:0,
      };
    },
    computed: {
      submitBarText() {
        return '结算' +  '('+this.num+')';
      },
      getTotalPrice() {
        return this.totalPrice*100;
      }
    },
    methods: {
      formatPrice(price) {
        return (price / 1).toFixed(2);
      },
      onSubmit() {
        this.$router.push("/bp");
      },
      // 更新购物车中商品数量
      updateNum(pid,num){
        this.axios.get("/rlg/cart/update?pid="+pid+"&num="+num).then((rs) => {
          if (rs.data.code == 200) {
            // 获取购物车中购物信息数据
            this.totalItems = rs.data.data.total;
            var plist = rs.data.data.records;
            // 遍历重组数据
            this.getList(plist);
          } else {
            this.$toast.fail(rs.data.msg);
          }
        });
      },
      // 删除一条购物信息
      deleteOne(pid){
        this.axios.get("/rlg/cart/delete?pid="+pid).then((rs) => {
          if (rs.data.code == 200) {
            // 获取购物车中购物信息数据
            this.totalItems = rs.data.data.total;
            var plist = rs.data.data.records;
            // 遍历重组数据
            this.getList(plist);
          } else {
            if(rs.data.code == 301){
              this.bol=false;
            }
            this.$toast.fail(rs.data.msg);
          }
        });
      },
      // 选中或取消选中某个商品
      checked(pid){
        this.axios.get("/rlg/cart/checked?pid="+pid).then((rs) => {
          if (rs.data.code == 200) {
            // 获取购物车中购物信息数据
            this.totalItems = rs.data.data.total;
            var plist = rs.data.data.records;
            // 遍历重组数据
            this.getList(plist);
          } else {
            this.$toast.fail(rs.data.msg);
          }
        });
      },
      getNextPage(){
        this.axios.get("/rlg/cart/list?pageNum="+this.currentPage).then((rs) => {
          if (rs.data.code == 200) {
            // 获取购物车中购物信息数据
            this.totalItems = rs.data.data.total;
            var plist = rs.data.data.records;
            // 遍历重组数据
            this.getList(plist);
          } else {
            this.$toast.fail(rs.data.msg);
          }
        });
      },
      getList(plist){
        // 清空原有数据
        this.goods=[];
        for (var i = 0; i < plist.length; i++) {
          // 重组商品数据
          var pro = {
            id: plist[i].id,
            productId:plist[i].productId,
            title: plist[i].subtitle,
            desc: plist[i].subtitle,
            price: plist[i].price,
            num: plist[i].quantity,
            thumb: plist[i].mainImage
          };
          // 每重组一个，就放到商品集合中
          this.goods.push(pro);

          // 这里有一个问题，
          this.goodsCopy.push(pro);

          // 判断当前这个商品是否被选中
          if(plist[i].checked == 1){
            if(this.checkedGoods.indexOf(plist[i].id) == -1){
              this.checkedGoods.push(plist[i].id);
            }
          }
        }
      }
    },
    created() {
      // 页面一加载，就判断用户是否登录，没有登录不让看购物车，跳转login
      if (this.$store.state.us == -1) {
        this.$router.push('/login');
      } else {
        //  查询当前用户购物车中所有数据
        this.axios.get("/rlg/cart/list").then((rs) => {
          if (rs.data.code == 200) {
            // 页面空状态切换
            this.bol=true;
            // 获取购物车中购物信息数据
            this.totalItems = rs.data.data.total;
            var plist = rs.data.data.records;
            // 遍历重组购物车数据
            this.getList(plist);
          } else {
            if(rs.data.code != 301){
              this.$toast.fail(rs.data.msg);
            }
          }
        });

        // 查询当前购物车中选中商品总价和数量
        this.axios.get("/rlg/cart/total").then((rs) => {
          if (rs.data.code == 200) {
            this.totalPrice = rs.data.data.totalPrice;
            this.num = rs.data.data.num;
          }
        });
      }
    },
    updated() {
      // 查询当前购物车中选中商品总价和数量
      this.axios.get("/rlg/cart/total").then((rs) => {
        if (rs.data.code == 200) {
          this.totalPrice = rs.data.data.totalPrice;
          this.num = rs.data.data.num;
        }
      });
    }
  };
</script>

<style lang="less">
  .zwh{
    height: 50px;
  }
  .cart-vc{
    padding: 20px 20px 20px 40px !important;
  }
   .goods-card {
      margin: 0;
      background-color: white;
    }

    .delete-button {
      height: 100% !important;
    }
  .van-submit-bar {
    bottom: 50px !important;
  }

  .card-goods {
    padding: 10px 0;
    background-color: #fff;

    &__item {
      // position: relative;
      // background-color: #fafafa;

      .van-checkbox__label {
        width: 100%;
        height: auto; // temp
        padding: 0 10px 0 15px;
        box-sizing: border-box;
      }

      .van-checkbox__icon {
        top: 50%;
        left: 10px;
        z-index: 1;
        position: absolute;
        margin-top: -10px;
      }

      .van-card__price {
        color: #f44;
      }
    }
  }
</style>
